import React = require('react');
import { Page, PageProps } from 'maishu-chitu-react';
import { ShoppingService } from 'mobile/services/shoppingService';
import { defaultNavBar } from 'mobile/site';
import { DataList } from 'mobile/controls/dataList';
import { ImageBox } from 'mobile/controls/imageBox';
import { SpinerState } from 'controls/spiner-component';


interface State extends SpinerState {

}


export default class FavorPage extends React.Component<PageProps, {}>{
    private unfavor: Function;
    private dataView: HTMLElement;
    shop: ShoppingService;

    constructor(props) {
        super(props);

        this.shop = this.props.createService(ShoppingService);

        this.unfavor = (event: React.MouseEvent, item: FavorProduct) => {
            let btn = event.target as HTMLElement;

            return this.shop.unfavorProduct(item.ProductId).then(() => {
                btn.style.opacity = '0';
                setTimeout(() => {
                    btn.style.display = 'none';
                    (btn.nextSibling as HTMLElement).style.opacity = '1';
                }, 400);
            });
        };
    }

    showProduct(productId: string) {
        this.props.app.redirect(`#home_product?id=${productId}`);
    }
    loadFavorProducts(pageIndex: number) {
        if (pageIndex > 0) {
            return Promise.resolve([]);
        }
        return this.shop.favorProducts().then(items => {
            return items;
        });
    }
    render() {
        return <>
            <header>
                {defaultNavBar(this.props.source, { title: '我的收藏' })}
            </header>
            <section ref={o => o ? this.dataView = o : null}>
                <DataList className="container" loadData={this.loadFavorProducts.bind(this)}
                    dataItem={(o: FavorProduct) => (
                        <div key={o.ProductId}>
                            <div className="item row">
                                <div onClick={() => this.showProduct(o.ProductId)} className="col-xs-4">
                                    <ImageBox src={o.ImageUrl} className="img-responsive" />
                                </div>
                                <div className="col-xs-8">
                                    <div onClick={() => this.showProduct(o.ProductId)} className="name">
                                        <div>{o.ProductName}</div>
                                    </div>
                                    <button ref={`btn_${o.Id}`} onClick={(event) => this.unfavor(event, o)} className="pull-right">
                                        <i className="icon-heart"></i> 取消收藏
                                    </button>
                                    <label className="pull-right">
                                        已取消
                                    </label>
                                </div>
                            </div>
                            <hr className="row" />
                        </div>
                    )}
                    emptyItem={
                        <div className="norecords">
                            <div className="icon">
                                <i className="icon-heart-empty">

                                </i>
                            </div>
                            <h4 className="text">你还没有添加收藏哦</h4>
                        </div>
                    } />
            </section>
        </>
    }
}